<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>五角星评分案例</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .comment {
            font-size: 80px;
            color: orangered;
            margin-left:600px;
            margin-top:200px;
        }

        .comment li {
            float: left;
            cursor: pointer;
        }

        ul {
            list-style: none;
        }
    </style>
    <script src="jquery-1.11.1.js"></script>
    <script>
        //鼠标放上去当前的li和之前的所有li内容全变成实心五角星，离开变为空心
        //鼠标点击哪个li，当前li和之前所有的li变成实心五角星，其他变为空心
        $(function () {
            var wjx_none = '☆'; // 空心五角星
            var wjx_sel = '★'; // 实心五角星
            $(".comment li").on("mouseenter",function(){
                $(this).text(wjx_sel).prevAll("li").text(wjx_sel).end().nextAll("li").text(wjx_none);
//                $(this).text(wjx_sel).prevAll("li").text(wjx_sel)
//                $(this).nextAll("li").text();
            });

            $(".comment li").on("mouseleave",function(){
                if($("li.current").length===0){
                    $(".comment li").text(wjx_none);
                }else{
                    $("li.current").text(wjx_sel).prevAll("li").text(wjx_sel).end().nextAll("li").text(wjx_none);
                }

            });

            $(".comment li").on("click",function(){
                $(this).attr("class","current").siblings("li").removeAttr("class","current")
            });

        })
    </script>
</head>

<body>

<ul class="comment">
    <li>☆</li>
    <li>☆</li>
    <li>☆</li>
    <li>☆</li>
    <li>☆</li>
</ul>

</body>
</html>
